<template>
	<view class="item_s" @tap="check">
		<view class="avatar_bg">
			<u-image width="180" height="180" :src="info.avatar" border-radius="16"></u-image>
			<image class="tip" :src="info.hot" v-if="info.hot"></image>
		</view>
		<view class="right">
			<view class="name">
				<text class="ntx">{{ info.nickname }}</text>
				<view class="area" v-if="info.iLike" @tap.stop="updateLike(0)">
					<image src="@/static/shifu/icon_collect_s.png" class="icon"></image>
					<text style="color: #fe5e10">{{ info.like || 0 }}</text>
				</view>
				<view class="area" v-else @tap.stop="updateLike(1)">
					<image src="@/static/shifu/icon_collect.png" class="icon"></image>
					<text>{{ info.like || 0 }}</text>
				</view>
			</view>
			<view class="end">
				<text>已服务{{ info.order || 0 }}单 | 评价{{ info.talk || 0 }}</text>
				<view class="area">
					<u-icon name="map-fill" size="30" color="#24C388"></u-icon>
					<text style="color: #333">{{ info.distance }}km</text>
				</view>
			</view>
			<view class="middle">
				<text class="tips">{{ info.content || "欢迎下单" }}</text>
				<view class="btn" @tap.stop="jump">{{ btnText }}</view>
			</view>
			<view class="times">最近可约：{{ info.near }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "shifu-item",
	props: {
		info: Object,
		sid: String,
		create: Boolean,
		from: String,
		btnText: {
			type: String,
			default: "立即预约"
		}
	},
	data() {
		return {
			flag: true
		}
	},
	methods: {
		check() {
			this.$emit("check", this.info)
		},
		// 收藏
		async updateLike(type) {
			if (!this.flag) return
			this.flag = false
			let login = vk.checkToken()
			if (!login) {
				this.flag = true
				return vk.toast("请先前往登录", "none", 1000, () => {
					vk.navigateTo("/pages/login/login")
				})
			}
			if (type == 1) {
				this.info.like++
				this.info.iLike = 1
			} else {
				this.info.like--
				this.info.iLike = null
			}
			await vk.callFunction({
				url: "client/user.updateShifuLike",
				data: { _id: this.info._id, agent: this.info.agent }
			})
			this.flag = true
		},
		// 查看头像大图
		look() {
			let arr = this.info.images || []
			if (!this.info.avatar && arr.length <= 0) return
			if (this.info.avatar) {
				arr = [this.info.avatar, ...this.info.images]
			}
			uni.previewImage({ urls: arr })
		},
		// 立即预约
		jump() {
			this.$emit("jump", this.info)
		}
	}
}
</script>

<style lang="scss" scoped>
.item_s {
	margin: 4rpx 20rpx 20rpx;
	background: #ffffff;
	border-radius: 12rpx;
	padding: 24rpx 20rpx 24rpx 10rpx;
	display: flex;
	overflow: hidden;
}
.avatar_bg {
	width: 180rpx;
	height: 180rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 10rpx;
	.tip {
		position: absolute;
		width: 180rpx;
		height: 180rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
.right {
	flex: 1;
	padding: 4rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.name {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		display: flex;
		align-items: center;
		.area {
			display: flex;
			align-items: center;
			margin-right: 16rpx;
			font-size: 24rpx;
			color: #999;
			font-weight: normal;
		}
		.icon {
			width: 40rpx;
			height: 40rpx;
			margin: 0 4rpx 0 10rpx;
		}
	}
	.middle {
		display: flex;
		font-size: 24rpx;
		color: #999999;
		align-items: center;
		.btn {
			height: 50rpx;
			background: #24c388;
			border-radius: 27rpx;
			color: #ffffff;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			margin-left: auto;
			border: 1rpx solid #24c388;
		}
		.tips {
			width: 290rpx;
			word-break: break-all;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
	.end {
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14rpx 0;
		.area {
			font-size: #333;
		}
	}
	.white {
		background: #ffffff;
		color: #24c388;
		border: 1rpx solid #24c388;
	}
	.times {
		position: absolute;
		right: -20rpx;
		top: -24rpx;
		background-color: rgba(36, 195, 136, 0.12);
		font-size: 22rpx;
		color: #24c388;
		padding: 8rpx 12rpx;
		border-radius: 0 12rpx 0 12rpx;
	}
	.dis {
		filter: grayscale(100%);
	}
}

.ntx {
	line-height: 32rpx;
	transform: translateY(-2rpx);
}
</style>
